<template>
  <div class="asset-discovery">
    <a-tabs default-active-key="1">
      <a-tab-pane key="1">
        <span slot="tab">
          <a-icon type="apple" />
          手持式
        </span>
        <div class="asset-discovery-content">
          <a-tabs
            v-model="activeKey"
            tab-position="left"
            :style="{ height: '100%' }"
          >
            <a-tab-pane v-for="i in 30" :key="i" :tab="`牧场${i}`"> 
              <asset-discovery-item />
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2">
        <span slot="tab">
          <a-icon type="android" />
          定位
        </span>
        <div class="asset-discovery-content">
          <a-tabs
            v-model="activeKey"
            tab-position="left"
            :style="{ height: '100%' }"
          >
            <a-tab-pane v-for="i in 30" :key="i" :tab="`牧场${i}`"> 
              <asset-discovery-item />
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import AssetDiscoveryItem from './AssetDiscoveryItem.vue';
export default {
  components: { AssetDiscoveryItem },
  name: "AssetDiscovery",
  data () {
    return {
      activeKey:1,
    };
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
  .asset-discovery {
    width: 50%;
    margin-bottom: 20px;
    background: #fff;
    .asset-discovery-content {
      width: 100%;
      height: 300px;
    }
  }
</style>
<style>
  .ant-tabs-bar, .ant-tabs-top-bar{
    margin: 0;
    margin-bottom: 5px;
  }
  .ant-tabs .ant-tabs-left-content{
    padding-left: 10px;
  }
</style>